<template>
    <div>
        <div class="home">
            <el-row>
                <el-col :span="8">
                    <el-card shadow="hover" class="box-card centered-card blue" :show-close="false">
                        <div>
                            用户数量： <el-tag type="primary">{{ userCount }}</el-tag>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="box-card centered-card blue" :show-close="false">
                        <div>
                            文件数量： <el-tag type="primary">{{ fileCount }}</el-tag>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" class="box-card centered-card blue" :show-close="false">
                        <div>
                            资讯数量： <el-tag type="primary">{{ articleCount }}</el-tag>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card centered-card red" :show-close="false">
                        <div id="container1" style="height: 320px;;width: 500px;text-align: center;">
                            <el-tag type="primary">用户角色比例统计</el-tag>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="hover" class="box-card centered-card red" :show-close="false">
                        <div id="container2" style="height: 320px;;width: 500px;text-align: center;">
                            <el-tag type="primary">菜单类型比例统计</el-tag>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div style="margin-top: 20px;">
            <strong>公告通知</strong>
            <el-timeline style="margin-top: 25px;">
                <el-timeline-item v-for="item in noticeData" :key="item.id" :timestamp="formatTime(item.createTime)"
                    placement="top">
                    <el-card shadow="hover" style="text-align: left;">
                        <div>
                            {{ item.title }}
                        </div>
                        <div v-html="item.content">
                        </div>
                    </el-card>
                </el-timeline-item>
            </el-timeline>


        </div>
    </div>
</template>
<script>
import * as echarts from 'echarts'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Home',
    data() {
        return {
            userCount: 0,
            fileCount: 0,
            articleCount: 0,
            noticeData: [
            ],
        }
    },
    methods: {
        getUserCount() {
            this.$axios.get('/user/count').then(res => {
                this.userCount = res
            })
        },
        getFileCount() {
            this.$axios.get('/file/count').then(res => {
                this.fileCount = res
            })
        },
        getArticleCount() {
            this.$axios.get('/article/count').then(res => {
                this.articleCount = res
            })
        },
        getNotice() {
            this.$axios.get('/notice/list').then(res => {
                // console.log(res)
                this.noticeData = res
            })
        },
        formatTime(time) {
            let date = new Date(time)
            return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
        },
        getUserType() {
            this.$axios.get('/echart/pie1').then(res => {

                console.log(res)
                this.draw1(res.data)
            })
        },
        getMenuType() {
            this.$axios.get('/echart/pie2').then(res => {
                console.log(res)
                this.draw2(res.data)
            })
        },
        draw1(data) {
            var chart = document.getElementById('container1');
            if (echarts.getInstanceByDom(chart)) {
                echarts.getInstanceByDom(chart).dispose();
            }
            var myChart = echarts.init(chart);
            var option = {
                title: {
                    text: '用户类型比例图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '用户数量',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data
                    }
                ]
            }
            myChart.setOption(option)
        },
        draw2(data) {
            var chart = document.getElementById('container2');
            if (echarts.getInstanceByDom(chart)) {
                echarts.getInstanceByDom(chart).dispose();
            }
            var myChart = echarts.init(chart);
            var option = {
                title: {
                    text: '菜单类型比例图',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                },
                series: [
                    {
                        name: '菜单数量',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: data
                    }
                ]
            }
            myChart.setOption(option)
        },

    }, mounted() {
        this.getUserCount()
        this.getFileCount()
        this.getArticleCount()
        this.getNotice()
        this.getUserType()
        this.getMenuType()

    },

}
</script>